<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_边框与内间距</title>
    <style>
      .d1 {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        /*border: 5px solid blue;*/
        border: 5px dotted blue;
        border-top: 5px double blue;
      }
      .d2 {
        width: 200px;
        height: 200px;
        margin-top: 20px;
        background-color:lightblue;
        border-radius: 20px;
      }
      .d3 {
        width: 200px;
        height: 100px;
        margin-top: 20px;
        background-color: #003152;
        border-radius: 50px;
      }
      .d4 {
        width: 200px;
        height: 200px;
        padding: 20px;
        border:5px solid black;
        background-color: olive;
        margin: 20px;
        box-sizing:border-box;/*切换盒子模型计算方案为边框盒子，效果：将内间距与边框都计算在预设的宽高之内*/
      }
      span {
        background-color: rgb(255,0,0,.5);
        border: 2px solid #f00;
      }
      .s1 {
        /*行内元素垂直方向上的内外间距都不生效*/
        padding: 50px;
      }
    </style>
</head>
<body>
    <span>span</span><span class="s1">span</span><span>span</span>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
    <div class="d4">我是测试内容</div>
</body>
</html>